<template>
  <Card title="传感器安装状态" v-bind="$attrs">
    <Form layout="vertical">
      <FormItem >
        <Table :columns="column" :dataSource="dataSource">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key == 'deviceStatus'">
              <Select v-model:value="record.deviceStatus" placeholder="请选择安装状态">
                <SelectOption v-for="status in statusList" :key="status.value" :value="status.value">
                  {{ status.label }}
                </SelectOption>
              </Select>
            </template>
            <template v-if="column.key == 'active'">
              <Button type="primary" @click="saveSensor(record)">保存修改</Button>
            </template>
          </template>
        </Table>
      </FormItem>
    </Form>
  </Card>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import {
  Card,
  Select,
  SelectOption,
  Form,
  FormItem,
  Button,
  Table,
} from 'ant-design-vue'

import { ListApi as ListSensorApi, EditApi as EdittSensorApi } from '/@/api/sensor/sensor'
import { Sensor } from '/@/api/sensor/model/sensor'
import { useMessage } from '/@/hooks/web/useMessage'
import { useRouter } from 'vue-router'
const router = useRouter()
const { createSuccessModal } = useMessage()
const dataSource = ref<Array<Sensor>>([])
const allSourceList = ref<Array<Sensor>>([])
const deviceSN = ref<any>()

const column = ref([
  {
    title: '设备序列号',
    dataIndex: 'deviceSN',
    key: 'deviceSN',
  },
  {
    title: '是否安装',
    dataIndex: 'deviceStatus',
    key: 'deviceStatus',
    customRender: ({ record }) => {
      if (record.deviceStatus === "0") {
        return '未安装';
      } else {
        return '已安装';
      }
    },
  },
  {
    title: '操作',
    dataIndex: 'active',
    key: 'active',
  },
])

const statusList = ref([
  { value: '0', label: '未安装' },
  { value: '1', label: '已安装' }
])

const listSensor = async () => {
  deviceSN.value = router.currentRoute.value.params.deviceSN
  allSourceList.value = await ListSensorApi()
  dataSource.value = allSourceList.value.filter((item) => item.parentId === deviceSN.value)
}
const saveSensor = async (sensor: Sensor) => {
  await EdittSensorApi(sensor).then(() => {
    createSuccessModal({ title: '保存成功' })
  })
}

onMounted(() => {
  listSensor()
})
onUnmounted(() => {
})
</script>

<style lang="less" scoped>
.button-margin {
  margin: 0 0 0 0.5rem;
}
</style>
